import React, { useEffect, useState } from 'react'
import {Table, Button, Modal, Tree } from "antd"
import axios from "axios"
import { 
  DeleteOutlined,
  ExclamationCircleOutlined,
  UnorderedListOutlined } 
from '@ant-design/icons';
const { confirm } = Modal;

export default function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const [rightList, setRightList] = useState([])
  const [currentRights, setCurrentRights] = useState([])
  const [currentId, setCurrentId] = useState(0)
  const [isModalVisible, setisModalVisible] = useState(false)

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'roleName',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button danger type="primary" shape="circle" icon={<DeleteOutlined />} 
          onClick={() => confirmMethod(item)}
          />
            <Button onClick={()=>{
              setisModalVisible(true)
              setCurrentRights(item.rights)
              setCurrentId(item.id)
            }} type="primary" shape="circle" icon={<UnorderedListOutlined />} />
        </div>
      }
    },
  ]

  useEffect(() => {
    axios.get("/roles").then(res => {
      // console.log(res.data);
      setdataSource(res.data)
    })
    axios.get("/rights?_embed=children").then(res => {
      // console.log(res.data);
      setRightList(res.data)
    })
  }, [])
  // 确定是否删除提示框
  const confirmMethod = (item) => {
    confirm({
      title: '你确定要删除吗?',
      icon: <ExclamationCircleOutlined />,
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        // console.log('Cancel');
      },
    });
  }
  // 删除处理逻辑
  const deleteMethod = (item) => {
    console.log(item);
    // 当前页面同步状态 + 后端同步
    setdataSource(dataSource.filter(data=>data.id !== item.id))
    axios.delete(`/roles/${item.id}`)
  } 

  const handleOk = () => {
    // console.log(currentRights);
    setisModalVisible(false)
    // 同步datasource
    setdataSource(dataSource.map(item=>{
      if(item.id===currentId){
        return {
          ...item,
          rights: currentRights
        }
      }
      return item
    }))
    // patch
    axios.patch(`/roles/${currentId}`,{
      rights: currentRights
    })
  }
  const handleCancel = () => {
    setisModalVisible(false)
  }

  const onCheck = (checkKeys) => {
    // console.log(checkKeys);
    setCurrentRights(checkKeys.checked)
  }

  return (
    <div>
      <Table dataSource={dataSource} columns={columns}
      rowKey={(item) => item.id}
      ></Table>

      <Modal title="权限分配" visible={isModalVisible} onOk={handleOk} 
        onCancel={handleCancel}
      >
        <Tree
          checkable
          checkedKeys={currentRights}
          onCheck={onCheck}
          checkStrictly = {true}
          treeData={rightList}
        />
      </Modal>
    </div>
  )
}
